window.onload = function () {
  // 当点击某一个li的时候，该li添加下边线  bottomColor
  var lis = document.querySelectorAll(".aside .nav .nav li");
  var Aa = document.querySelectorAll(".aside .nav .nav li a");
  var oUl = document.querySelectorAll(".aside .nav .nav li ul");
  for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].addEventListener("click", function () {
      for (var j = 0; j < lis.length; j++) {
        lis[j].className = "";
      }
      this.className = "bottomColor";
    });
  }
  // 让a字体改变颜色
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].addEventListener("click", function () {
      for (var i = 0; i < Aa.length; i++) {
        Aa[i].classList.remove("blue");
      }
      this.classList.add("blue");
    });
  }
  // 显示与隐藏
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].onclick = function () {
      var uls = this.nextElementSibling;
      if (getComputedStyle(uls).height == "0px") {
        for (var j = 0; j < oUl.length; j++) {
          oUl[j].style.height = "0px";
        }
        uls.style.height =
          uls.children[0].offsetHeight * uls.children.length + "px";
      } else {
        uls.style.height = "0px";
      }
    };
  }
};

// 获取元素
var aH6 = document.querySelectorAll('#zuzhi h6');
var aUl = document.querySelectorAll('#zuzhi ul');


for(var i = 0; i < aH6.length; i++){
    // 给h6元素添加点击事件监听
    aH6[i].onclick = function(){
        // 将当前点击的h6标签的下一个兄弟元素，即ul，赋值给oUl
        var oUl = this.nextElementSibling;

        if(getComputedStyle(oUl).height == '0px'){
            for(var i = 0; i < aUl.length; i++){
                aUl[i].style.height = '0px';
            }
            // ul的高度 = ul的一个孩子也就是li的高度*li的总数
            oUl.style.height = oUl.children[0].offsetHeight * oUl.children.length + 'px';
        }else{//如果当前点击的oUl高度不等于0，那么说明当前是打开状态，点击后即把高度变为0，变为收回状态。
            oUl.style.height = '0px';
        }

    }
}


var data = [
  { id: 1, name: "疾控登记员", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 2, name: "疾控排查员", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 3, name: "120驾驶员", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 4, name: "隔离点工作人员", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 5, name: "居家监测管理人员", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 6, name: "疾控中心领导", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 7, name: "通知公告发布中心", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 8, name: "统计分析员", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 9, name: "账号管理员", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 10, name: "组织管理员", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 11, name: "兼职", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
  { id: 12, name: "实验员", number: 3, operator: '系统', date: '2022-08-22', operation: ''},
];

var page = 1;//当前的页码
var count = 10;//每页的条数
var oTBody = document.querySelector('tbody');//获取tbody
var oPagination = document.querySelector('.pagination')//获取分页容器
var oPrevBtn = document.querySelector('.prev')//获取上一页的按钮
var oNextBtn = document.querySelector('.next')//获取下一页的按钮


//获取添加的保存按钮
var oAddSaveBtn = document.querySelector('.addSaveBtn');
//获取修改的保存
var oEditSaveBtn=document.querySelector('.editSaveBtn');
//获取重置按钮
var oResetBtn=document.querySelector('.resetBtn');

// 页面初始化的渲染功能
function render() {
  // 让table为空
  oTBody.innerHTML = '';
  var readerArr = data.slice((page - 1) * count, page * count);//根据count和page准备要渲染的数据
  for (var i = 0; i < readerArr.length; i++) {//循环要渲染的数据
      var oTr = document.createElement('tr');//创建tr
      oTr.innerHTML = `
      <td>${readerArr[i].id}</td>
      <td>${readerArr[i].name}</td>
      <td>${readerArr[i].number}</td>
      <td>${readerArr[i].operator}</td>
      <td>${readerArr[i].date}</td>
      <td>
       
        <button class="btn btn-warning edit">编辑<button>
        <button class="btn btn-danger del">删除<button>
        
      </td>
      `; //给tr创建内容
      // <button class="btn btn-primary eye">查看详情<button>
      oTBody.appendChild(oTr);//把tr创建到tbody里面
  }



// 渲染页码
var aPageBtn = document.querySelectorAll('.pageBtn');
// 删除所有的页码
for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
}
// 根据数据的长度重新创建页码
for (var i = 1; i <= Math.ceil(data.length / count); i++) {
    var oLi = document.createElement('li');
    oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
    if (i == page) {
        oLi.classList.add('active');
    }
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  } 
}
// 一上来就渲染一次数据
render();

// 给分页加事件
oPagination.addEventListener('click', changePage);
function changePage() {
  if (event.target.className == 'pageBtn') {
      page = event.target.innerHTML;
      render();
  }
}
// 给上一页和下一页加事件
oPrevBtn.addEventListener('click', prev);
oNextBtn.addEventListener('click', next);
function prev() {
  if (page > 1) {
      page--;
      render();
  }
}
function next() {
  if (page < Math.ceil(data.length / count)) {
      page++;
      render();
  }
}


// 查看详情
// var oEyeBtn = document.querySelector('.eye');
// oEyeBtn.addEventListener('click', openEye);
// function openEye() {
//   $('#editModal').modal('show');
// }

  // for (var i = 0; i < data.length; i++) {
  //   // roleNameInp = data[i].name;
  //   $('#editModal').modal('show');
  // }
  
// }




// 编辑
// 给所有的编辑按钮加事件
oTBody.addEventListener('click', openEdit);
function openEdit() {
    //判断事件源
    if (event.target.className.includes('edit')) {
        //让编辑框显示
        $('#editModal').modal('show');
        //确认是那个id的数据
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据，找到对应id的，给编辑框赋值
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                document.querySelector('.editId').value =data[i].id ;
                document.querySelector('.editName').value = data[i].name;
                document.querySelector('.editNumber').value = data[i].number;
                document.querySelector('.editOperator').value = data[i].operator;
                document.querySelector('.editDate').value = data[i].date;

            }
        }
    }
}

//点击修改保存
oEditSaveBtn.addEventListener('click',editSave);
function editSave(){
    //看替换的是哪一条；
    var id=document.querySelector('.editId').value;
    //循环数据，找到对应的，更改
    for(var i=0;i<data.length;i++){
        if(data[i].id==id){
            data[i].id=document.querySelector('.editId').value;
            data[i].name=document.querySelector('.editName').value;
            data[i].number=document.querySelector('.editNumber').value;
            data[i].operator=document.querySelector('.editOperator').value;
            data[i].date=document.querySelector('.editDate').value;
        }
    }
    //关闭弹框
    $('#editModal').modal('hide');
    //重新渲染
    render();
}





// 删除功能
var oDelBtn = document.querySelector('.del');
oTBody.addEventListener('click', del);
function del() {
    if (event.target.className.includes('del')) {
        //找到id
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据对比
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                //删除id所对应的数据
                data.splice(i, 1);
            }
        }
        //重新渲染
        render();
    }
}






    

// 添加
oAddSaveBtn.addEventListener('click', addFn);
function addFn() {
    var addId = document.querySelector('.addId').value;
    var addName = document.querySelector('.addName').value;
    var addNumber = document.querySelector('.addNumber').value;
    var addOperator = document.querySelector('.addOperator').value;
    var addDate = document.querySelector('.addDate').value;


    data.push({
        id: addId,
        name: addName,
        number: addNumber,
        operator: addOperator,
        date: addDate,
    })

    render();
    //让模态框隐藏
    $('#addModal').modal('hide');
}
